<template>
  <div class="app-container">
    <div class="fundodoo-condition">
      <condition
        :condition-state="conditionsKey"
        @fetchGoodsConditionChange="fetchData"
      />
    </div>
    <div class="fundodoo-action">
      <actions />
    </div>
    <div class="fundodoo-grid fundodoo-goods-grid">
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        class="ag-theme-blue"
        row-height="88"
        always-show-vertical-scroll="true"
        suppress-loading-overlay
        :column-defs="columnDefs"
        :row-data="rowData"
        :framework-components="frameworkComponents"
        :default-col-def="defaultColDef"
        @grid-ready="onFundodooGridReady"
      />
    </div>
  </div>
</template>

<script>
import { FundodooGridHeader } from '../../components'
import { Condition, Actions, ImgRenderer, NameRenderer, StatusRenderer, OperatingRenderer } from '../components'
import { AgGridVue } from 'ag-grid-vue'
import { goodsList } from '@/api/goods'

export default {
  name: 'GoodsList',
  components: {
    Condition,
    Actions,
    AgGridVue
  },
  data() {
    return {
      conditionsKey: {},
      columnDefs: null,
      defaultColDef: null,
      frameworkComponents: null,
      rowData: []
    }
  },
  created() {

  },
  beforeMount() {
    this.columnDefs = [
      { headerName: '', width: 58, colId: 'id', valueGetter: (params) => {
        return params.node.rowIndex + 1
      } },
      { headerName: '图片', field: 'image', width: 158, cellRenderer: 'ImgRenderer' },
      { headerName: '名称', field: 'storeName', width: 198, cellRenderer: 'NameRenderer' },
      { headerName: '虚拟销量', field: 'ficti', width: 158 },
      { headerName: '库存', field: 'stock', width: 158 },
      { headerName: '销量', field: 'sales', width: 158 },
      { headerName: '点赞', field: 'ficti', width: 158, cellRenderer: (params) => {
        return "<div class='fundodoo-center'><span class='el-icon-star-on'>" + params.value + '</span></div>'
      } },
      { headerName: '收藏', field: 'price', width: 158, cellRenderer: (params) => {
        return "<div class='fundodoo-center'><span class='el-icon-star-off'>" + params.value + '</span></div>'
      } },
      { headerName: '状态', field: 'showp', cellRenderer: 'StatusRenderer' },
      { headerName: '操作', field: 'id', cellRenderer: 'OperatingRenderer' }
    ]
    this.frameworkComponents = {
      ImgRenderer: ImgRenderer,
      NameRenderer: NameRenderer,
      StatusRenderer: StatusRenderer,
      FundodooGridHeader: FundodooGridHeader,
      OperatingRenderer: OperatingRenderer
    }
    this.defaultColDef = {
      headerComponent: 'FundodooGridHeader'
    }
  },
  methods: {
    onFundodooGridReady(params) {
      onpopstate = (e) => {
        if (e.state !== null && typeof (e.state.key) === 'undefined') {
          this.conditionsKey = e.state
          const conditions = e.state
          this.fetchData(conditions)
        }
      }
      // const conditions = {
      //   status: 1,
      //   classification: -1,
      //   goodsName: '',
      //   pushState: true,
      //   replaceState: true
      // }
      // this.fetchData(conditions)
      params.api.sizeColumnsToFit()
    },
    fetchData(params) {
      const pushState = params.pushState
      delete params.pushState
      const replaceState = params.replaceState
      delete params.replaceState
      if (pushState) {
        if (replaceState) {
          history.replaceState(params, this.$route.meta.title, this.$route.path)
        } else {
          history.pushState(params, this.$route.meta.title, this.$route.path)
        }
      } else if (params.replaceState) {
        history.replaceState(params, this.$route.meta.title, this.$route.path)
      }
      goodsList(params).then(res => {
        this.rowData = res.data.records
      })
    }
  }
}
</script>

<style scoped>

</style>
